<template>
  <div class="about">
    <h1>总数量：{{ $store.getters.totalCount }}</h1>
    <h1 @click="handleChangeToken">token: {{ $store.state.token }}</h1>
    <h1
      @click="handleClick(item)"
      v-for="item in $store.state.list"
      :key="item.id"
    >
      {{ item.value }}
    </h1>
    <input type="text" v-model="value" name="" id="" />
    <button @click="handleSubmit">提交</button>
  </div>
</template>
<script>
// 数据往下流（vuex中留下来了）
// 逻辑往上走（vuex来负责处理逻辑）
export default {
  data() {
    return {
      value: '',
    }
  },
  created() {
    // 调用vuex中数据实现页面渲染
    console.log(this.$store.state)
    // 调用vuex中actions下面的函数
    // 1. 第一个地方，在生命周期中调用
    this.$store.dispatch('getData', { msg: '我是默认参数' })
  },
  methods: {
    handleClick(item) {
      // 逻辑往上走，（组件只通知vuex去改变数据就行了，）
      // 组件除非要请求异步数据。否则只能通知 给 mutation函数
      this.$store.commit('change_value', { item, who: '和你' })
    },
    handleChangeToken() {
      this.$store.commit('change_token', { token: '你好，我是改变后的token' })
    },
    // 提交数据
    handleSubmit() {
      // this.$store.commit('add_list_item', {
      //   id: Date.now(),
      //   value: this.value,
      //   check: false,
      //   count: 2,
      // })
      // 2. 第二个地方，在元素绑定的事件上调用
      this.$store.dispatch('getData', {})
    },
  },
}
</script>
